<template>
	<view class="centerbox">
		<view class="rechTop">
			<view class="imgTitele flex">
				<image src="/static/images/toptitleImage.png"></image>
			</view>
			<view class="boxColor"></view>
		</view>
		<view class="viewTab">
			<view class="custom-tabs">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ 'active': activeTab === index }" @click="handleTabChange(index)">
					<view class="tab-content">
						<image v-if="activeTab === index" :src="tab.activeIcon" class="tab-icon" />
						<text class="tab-text">{{ tab.title }}</text>
					</view>
				</view>
			</view>
			<view class="YouBox" v-for="item in dataList" :key="item" @click="PurchaseCick(item)">
				<view class="Top_left">
					<span>NEW</span>
				</view>
				<view class="CenBox">
					<view class="cen_left">
						<view class="left_Price">
							<p v-if="item.discount_type==0">
								<span>$</span>
								<text>{{item.discounted_price}}</text>
							</p>
							<p v-if="item.discount_type==1">
								<text>{{item.discount / 10}}</text>
								<span style="margin-left: 10rpx;">折</span>
							</p>
							<span>{{item.available_shop}}</span>
						</view>
						<view class="left_title">
							<p>{{item.name}}</p>
							<span>有效期至{{ formatToChineseDateTime(item.expire_time) }}</span>
						</view>
					</view>
					<view class="cen_right">
						<p>
							<span style="padding-top: -10rpx;">$</span>
							<text>{{item.original_price}}</text>
						</p>
						<span>售价</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { httpPost } from '@/utils/http'
	import formatToChineseDateTime from '@/utils/format/formatChineseDate'
	import { useUserStore } from '@/store'
	const userStore = useUserStore()
	const dataList = ref([]);
	const activeTab = ref(0);

	// Define your tabs with titles and active icons
	const tabs = ref([
		{ title: '优惠券', activeIcon: '/static/images/You_cen.png' },
		{ title: '包月卡', activeIcon: '/static/images/Byue.png' },
		{ title: '节日', activeIcon: '/static/images/Youhui.png' },
	]);

	onMounted(() => {
		Getlistorders();
	});

	const handleTabChange = (index : number) => {
		activeTab.value = index;
		Getlistorders();
	};
	// 根据状态获取优惠券
	const token = uni.getStorageSync('token');
	const Getlistorders = async () => {
		try {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			
			const statusMap = [0, 1, 2];
			const kind = statusMap[activeTab.value];

			const response = await httpPost(
				'/miniapp/get_coupons/',
				{
					coupon_type: kind,
				},
				{},
				{
					'Authorization': `Bearer ${userStore.userInfo.token}`,
					'Content-Type': 'application/json;charset=utf-8'
				}
			);
			dataList.value = response.data
		} catch (error) {
			console.error('请求失败:', error);
			uni.showToast({ title: '获取失败', icon: 'none' });
		} finally {
			uni.hideLoading();
		}
	};
	const PurchaseCick=async(item)=>{
		await getpurchase_coupon(item.coupon_code)
	}
	const getpurchase_coupon = async (item) => {
		try {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			const response = await httpPost(
				'/miniapp/purchase_coupon/',
				{
					coupon_code: item,
				},
				{},
				{
					'Authorization': `Bearer ${userStore.userInfo.token}`,
					'Content-Type': 'application/json;charset=utf-8'
				}
			);
			console.log(response.message);
			if(response.status_code==400){
				console.log(response.status_code);
				uni.showToast({ title: response.message, icon: 'none' });
			}
		} catch (error) {
			console.error('请求失败:', error);
			uni.showToast({ title: '', icon: 'none' });
		} 
	};
</script>

<style scoped>
	/* Your existing styles */
	:deep(.wd-tabs__nav-item-text) {
		font-size: 28rpx;
	}

	:deep(.wd-tabs) {
		background-color: black;
	}

	/* Custom Tabs Styles */
	.custom-tabs {
		display: flex;
		justify-content: space-around;
		padding: 0 20rpx;
		margin-bottom: 10rpx;
	}

	.tab-item {
		padding: 15rpx 0;
		text-align: center;
		flex: 1;
		position: relative;
	}

	.tab-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tab-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.tab-text {
		font-size: 28rpx;
		color: #999;
	}

	.tab-item.active .tab-text {
		color: black;
		font-weight: bold;
	}

	.tab-indicator {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background: linear-gradient(135deg, #FEA455 0%, #FB6B44 49.31%, #F94975 100%);
		border-radius: 3rpx;
	}
</style>

<style lang="scss" scoped>
	.centerbox {
		width: 100%;
		height: 100%;

		.rechTop {
			padding: 0 48rpx;
			height: 400rpx;
			position: relative;
			background-image: url(/static/images/vouchersTop.png);
			padding-top: constant(safe-area-inset-top);
			padding-top: env(safe-area-inset-top);
			background-size: 100% 100%;

			.imgTitele>image {
				width: 360rpx;
				height: 40rpx;
				margin-top: 55rpx;
			}

			.flex {
				display: flex;
				justify-content: center;
			}

			.boxColor {
				width: calc(100% - 96rpx);
				position: absolute;
				height: 300rpx;
				opacity: 1;
				bottom: -50rpx;
				left: 48rpx;
				z-index: 1;
				border-radius: 10px;
				background: linear-gradient(135deg, #FEA455 0%, #FB6B44 49.31%, #F94975 100%);
			}
		}

		.viewTab {
			padding: 0 48rpx;
			margin-top: 60rpx;

			.YouBox {
				height: 200rpx;
				background-image: url(/static/images/vouchers.png);
				background-size: 100% 100%;
				border-radius: 20rpx;
				color: white;
				margin-bottom: 20rpx;
				.Top_left {
					width: 100rpx;
					padding: 8rpx 20rpx;
					opacity: 1;
					text-align: center;
					border-radius: 20rpx 0 20rpx 0;
					background: #f14725;
					font-size: 20rpx;
				}

				.CenBox {
					padding: 0 48rpx;
					display: flex;
					height: calc(100% - 50rpx);
					justify-content: space-between;
					align-items: center;
					.cen_left {
						display: flex;
						gap: 40rpx;
						align-items: center;
						.left_Price {
							color: #FDF4E3;
							p {
								span {
									font-size: 24rpx;
									font-weight: 700;
									margin-right: 10rpx;
								}

								text {
									font-size: 50rpx;
									font-weight: 700;
									 line-height: 0.1
								}
							}
						}

						.left_title {
							p {
								font-size: 24rpx;
								font-weight: 700;
								color: rgba(255, 255, 255, 1);
							}

							span {
								font-size: 20rpx;
							}
						}
					}
					.cen_right{
						text-align: center;
						p {
							span {
								font-size: 24rpx;
								font-weight: 700;
								margin-right: 10rpx;
							}
							text {
								font-size: 50rpx;
								font-weight: 700;
								 line-height: 0.1
							}
						}
					}
				}
			}
		}
	}
</style>